<template>
  <div style="height:100%">
    <a-input-search style="margin-bottom: 8px" v-model="searchValue" placeholder="请输入组织名称查询" @change="onTreeSearchChange" />
    <div>
      <div class="hh-scroll-hover" style="height:460px">
        <div style="min-height:400px">
          <a-tree
            showLine
            checkable
            checkStrictly
            @expand="onExpand"
            :expandedKeys="expandedKeys"
            :selectedKeys="selectedKeys"
            :autoExpandParent="autoExpandParent"
            :treeData="orgList"
            v-model="checkedOrgKeys"
          >
            <template slot="title" slot-scope="{title}">
              <span v-if="title.indexOf(searchValue) > -1">
                {{ title.substr(0, title.indexOf(searchValue)) }}
                <span class="search-tree-color">{{ searchValue }}</span>
                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
              </span>
              <span v-else>{{ title }}</span>
            </template>
          </a-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPrivilegeOrgTree } from "@/services/system/api"
import { loopParentKey } from '@/utils/util'
function loopExpandKey (data, keys, expandKeys) {
  let flag = false
  data.forEach((item) => {
    let itemFlag = false
    const orgId = item.key
    keys.some((item) => {
      if (orgId === item) {
        itemFlag = true
        return true
      }
    })
    if (item.children) {
      const childFlag = loopExpandKey(item.children, keys, expandKeys)
      if (childFlag) {
        itemFlag = true
      }
    }
    if (itemFlag) {
      flag = true
      expandKeys.push(item.key)
    }
  })
  return flag
}
export default {
  name: 'OrgTreeForm',
  components: {

  },
  props: {
    userId: {
      type: String,
      default: null,
      required: false
    },
    roleId: {
      type: String,
      default: null,
      required: false
    }
  },
  data () {
    return {
      description: '组织树',
      dictData: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      // 组织树
      expandedKeys: [],
      selectedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      orgList: [],
      checkedOrgKeys: []
    }
  },
  created () {
    // 初始化数据
    this.findOrgTreeList()
  },
  watch: {
    checkedOrgKeys (val) {
      console.log('onCheck', val)
    }
  },
  methods: {
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onTreeSearchChange (e) {
      const value = e.target.value
      if (value) {
        const data = [...this.orgList]
        const expandedKeys = []
        loopParentKey(data, value, expandedKeys)
        this.expandedKeys = expandedKeys
        this.searchValue = value
        this.autoExpandParent = true
      }
    },
    findOrgTreeList () {
      const params = {}
      params.searchText = this.searchValue
      params.roleId = this.roleId
      params.userId = this.userId
      setTimeout(() => {
        this.$http.post(getPrivilegeOrgTree,params).then((res) => {
          const data = [...res.result.orgList]
          if (data) {
            this.orgList = data
            this.checkedOrgKeys = []
            const expandedKeys = res.result.expandedKeys
            const checkedKeys = res.result.checkedKeys
            if (checkedKeys && checkedKeys.length > 0) {
              // 设置展开节点
              const expandedOrgKeys = []
              loopExpandKey(data, checkedKeys, expandedOrgKeys)
              this.checkedOrgKeys = checkedKeys
              this.expandedKeys = expandedOrgKeys
            } else {
              this.expandedKeys = expandedKeys
            }
            this.autoExpandParent = true
          }
        }).catch(() => {
        })
      }, 50)
    },
    onCheck (checkedKeys) {
      console.log('onCheck', checkedKeys)
      this.checkedOrgKeys = checkedKeys
    }
  }
}
</script>
<style lang="less" scoped>
@import "~ant-design-vue/lib/style/themes/default.less";
.search-tree-color {
  color : @primary-color
}
</style>
